'use client'

import { useState } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { 
  ExternalLink, 
  Heart, 
  Star, 
  User, 
  Calendar,
  ArrowLeft,
  Share2
} from 'lucide-react'
import { formatRelativeTime } from '@/utils'
import type { Tool, Category, User as UserType } from '@/types'

interface ToolDetailProps {
  tool: Tool & {
    category: Category
    user: Pick<UserType, 'name' | 'avatar'>
    _count: {
      reviews: number
      favorites: number
    }
  }
}

export function ToolDetail({ tool }: ToolDetailProps) {
  const [isFavorited, setIsFavorited] = useState(false)
  const [favoriteCount, setFavoriteCount] = useState(tool._count.favorites)

  const handleVisit = () => {
    window.open(tool.url, '_blank', 'noopener,noreferrer')
  }

  const handleFavorite = async () => {
    // TODO: 实现收藏功能
    setIsFavorited(!isFavorited)
    setFavoriteCount(prev => isFavorited ? prev - 1 : prev + 1)
  }

  const handleShare = async () => {
    if (navigator.share) {
      try {
        await navigator.share({
          title: tool.title,
          text: tool.description,
          url: window.location.href,
        })
      } catch (error) {
        console.log('分享失败:', error)
      }
    } else {
      // 复制链接到剪贴板
      navigator.clipboard.writeText(window.location.href)
      alert('链接已复制到剪贴板')
    }
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white border-b">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="flex items-center gap-4 mb-4">
            <Link href="/">
              <Button variant="ghost" size="sm">
                <ArrowLeft className="h-4 w-4 mr-2" />
                返回
              </Button>
            </Link>
            <div className="flex items-center gap-2">
              <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                {tool.category.icon} {tool.category.name}
              </span>
            </div>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Left Column - Main Info */}
          <div className="lg:col-span-2 space-y-6">
            {/* Tool Header */}
            <Card>
              <CardContent className="p-6">
                <div className="flex items-start gap-6">
                  {/* Tool Image */}
                  <div className="flex-shrink-0">
                    {tool.image ? (
                      <Image
                        src={tool.image}
                        alt={tool.title}
                        width={120}
                        height={120}
                        className="rounded-lg border"
                      />
                    ) : (
                      <div className="w-30 h-30 bg-gradient-to-br from-blue-50 to-indigo-100 rounded-lg flex items-center justify-center">
                        <ExternalLink className="h-12 w-12 text-blue-400" />
                      </div>
                    )}
                  </div>

                  {/* Tool Info */}
                  <div className="flex-1 min-w-0">
                    <h1 className="text-3xl font-bold text-gray-900 mb-2">
                      {tool.title}
                    </h1>
                    <p className="text-lg text-gray-600 mb-4">
                      {tool.description}
                    </p>

                    {/* Stats */}
                    <div className="flex items-center gap-6 text-sm text-gray-500 mb-6">
                      <div className="flex items-center gap-1">
                        <Star className="h-4 w-4" />
                        <span>{tool._count.reviews} 评价</span>
                      </div>
                      <div className="flex items-center gap-1">
                        <Heart className="h-4 w-4" />
                        <span>{favoriteCount} 收藏</span>
                      </div>
                      <div className="flex items-center gap-1">
                        <Calendar className="h-4 w-4" />
                        <span>{formatRelativeTime(tool.createdAt)}</span>
                      </div>
                    </div>

                    {/* Action Buttons */}
                    <div className="flex gap-3">
                      <Button onClick={handleVisit} className="flex-1">
                        <ExternalLink className="h-4 w-4 mr-2" />
                        访问工具
                      </Button>
                      <Button 
                        variant="outline" 
                        onClick={handleFavorite}
                        className={isFavorited ? 'text-red-600 border-red-200' : ''}
                      >
                        <Heart className={`h-4 w-4 ${isFavorited ? 'fill-current' : ''}`} />
                      </Button>
                      <Button variant="outline" onClick={handleShare}>
                        <Share2 className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Tool Details */}
            <Card>
              <CardHeader>
                <CardTitle>工具详情</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div>
                    <h3 className="font-medium text-gray-900 mb-2">网站地址</h3>
                    <a 
                      href={tool.url} 
                      target="_blank" 
                      rel="noopener noreferrer"
                      className="text-blue-600 hover:text-blue-800 break-all"
                    >
                      {tool.url}
                    </a>
                  </div>
                  <div>
                    <h3 className="font-medium text-gray-900 mb-2">分类</h3>
                    <Link href={`/categories/${tool.category.id}`}>
                      <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800 hover:bg-blue-200 cursor-pointer">
                        {tool.category.icon} {tool.category.name}
                      </span>
                    </Link>
                  </div>
                  <div>
                    <h3 className="font-medium text-gray-900 mb-2">发布者</h3>
                    <div className="flex items-center gap-2">
                      <User className="h-4 w-4 text-gray-400" />
                      <span className="text-gray-600">{tool.user.name}</span>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>

          {/* Right Column - Sidebar */}
          <div className="space-y-6">
            {/* Quick Actions */}
            <Card>
              <CardHeader>
                <CardTitle>快速操作</CardTitle>
              </CardHeader>
              <CardContent className="space-y-3">
                <Button onClick={handleVisit} className="w-full">
                  <ExternalLink className="h-4 w-4 mr-2" />
                  访问工具
                </Button>
                <Button 
                  variant="outline" 
                  onClick={handleFavorite}
                  className="w-full"
                >
                  <Heart className={`h-4 w-4 mr-2 ${isFavorited ? 'fill-current text-red-600' : ''}`} />
                  {isFavorited ? '取消收藏' : '收藏工具'}
                </Button>
                <Button variant="outline" onClick={handleShare} className="w-full">
                  <Share2 className="h-4 w-4 mr-2" />
                  分享工具
                </Button>
              </CardContent>
            </Card>

            {/* Related Tools */}
            <Card>
              <CardHeader>
                <CardTitle>相关工具</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-gray-500">
                  暂无相关工具推荐
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  )
}
